<template>
	<view class="my-store-info">
		<view class="cash-code">
			<!--显示图片用的标签-->
			<image class="containerImg" :src="ewmImg"></image>
			<view class="number">编号：{{terminalInfo.qrCode}}</view>
			<!--创建一个画布，将它移出屏幕外看不到的地方-->
			<canvas class="canvas-code" canvas-id="myQrcode" style="
		      background: #fff;
		      width: 280px;
		      height: 280px;
		      display: block;
		      left: -800rpx;
		      position: absolute;
		    " />
		</view>
		<view class="btn" @click="deleCart">解除绑定</view>
		<u-modal :show="show" @confirm="confirm" @cancel="cancel" ref="uModal" :content='content'
			:showCancelButton="true"></u-modal>
		<u-popup :show="showFour" mode="center" :round="10" :closeOnClickOverlay="true" @close="closeFour">
			<view class="show-box-two">
				<view class="title">需要验证您的身份</view>
				<view class="mb">
					验证码发送至{{mbPhone}}
				</view>
				<view class="code-mb">
					<u--input placeholder="请输入验证码" border="bottom" type="number" v-model="terminalInfo.smsCode" clearable></u--input>
					<u-code ref="uCode" @end="end" @change="codeChange"></u-code>
					<u-button @tap="getCodeMbile" class="code-btn" size="mini" type="warning">{{tips}}</u-button>
				</view>
				<view class="sure-btn" @click="submit">确定</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	const app = getApp();
	const globalData = app.globalData;
	const apiUrl = globalData.wxApi;
	const wxImg = globalData.wxImg;
	import {
		getStoreData,
		dealNum,
		httpPost,
		httpGet,
		bdMapToTxMap,
		txMapToBdMap,
	} from "@/utils/http.js";
	import mpMixin from "@/uni_modules/uview-ui/libs/mixin/mpMixin";
	import QRCode from "@/utils/weapp-qrcode.js";
	const pic1 = require(`@/img/my/my1.png`);
	export default {
		data() {
			return {
				wxImg,
				apiUrl,
				dealNum,
				pic1,
				terminalInfo: {
					subStoreId: "",
					terminalId: "",
					storeId: "",
					qrCode: "",
					smsCode:""
				},
				cardList: [],
				code: "",
				ewmImg: "",
				showFour: false,
				show: false,
				content: "是否解除绑定",
				mbCode: "",
				tips: "获取验证码",
				smsCode: "",
				storeId:"",
				phone:"",
				mbPhone:""

			};
		},

		onShow() {

		},
		onUnload() {

		},
		onLoad(options) {
			console.log(options)
			let obj = JSON.parse(options.terminalInfo);
			this.terminalInfo.subStoreId=obj.subStoreId;
			this.terminalInfo.terminalId=obj.terminalId;
			this.terminalInfo.storeId=obj.storeId;
			this.terminalInfo.qrCode=obj.qrCode;
			this.storeId=options.storeId;
			console.log(122, this.terminalInfo)
			this.getCodeUrl();
			this.getStoreInfo();
		},
		methods: {
			getStoreInfo(){
				const _this = this;
				httpGet(`/api/sellerstore/selfInfo`).then((res) => {
					if (res.code == 0) {
						_this.phone=res.data.merchantPhone;
						_this.privacyPhone(_this.phone);
					}
				});
			},
			privacyPhone(phoneNumber){
				// 使用正则表达式将手机号前三位和后四位分开
				var regex = /(\d{3})\d{4}(\d{4})/;
				var matches = phoneNumber.match(regex);
				if (matches) {
				    // 获取到分组结果
				    var prefix = matches[1];   // 前三位
				    var suffix = matches[2];   // 后四位
				    
				    // 生成新的手机号（包含四位隐私号）
				    var newPhoneNumber = prefix + "****" + suffix;
				    this.mbPhone=newPhoneNumber;
				  
				} else {
				    
					uni.$u.toast("无效的手机号格式");
				}
			},
			getCodeUrl() {
				const _this = this;
				httpGet(`/api/sellerstore/cardPayUrl/` + _this.terminalInfo.qrCode).then((res) => {
					if (res.code == 0) {
						_this.getCode(res.data.cardPayUrl);
					}
				});
			},
			getCode(url) {
				new QRCode("myQrcode", {
					text: url,
					width: 280, //canvas 画布的宽
					height: 280, //canvas 画布的高
					padding: 16, // 生成二维码四周自动留边宽度，不传入默认为0
					correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
					callback: (res) => {
						console.log(res)
						this.ewmImg = res.path;
					},
				});
			},

			deleCart() {
				this.show = true;

			},
			closeFour() {
				this.showFour = false;
			},
			confirm() {
				this.show = false;
				this.showFour = true;
			},
			cancel() {
				this.show = false;
			},
			end() {
				this.tips = "重新获取";
			},
			getCodeMbile() {
				const _this = this;
				httpGet(`/api/sms/send/identity/`+_this.phone).then((res) => {
					if(res.code==0){
						_this.$refs.uCode.start();
					}
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			submit() {
				const _this = this;
				if (!this.terminalInfo.smsCode) {
					uni.$u.toast("请输入验证码");
					return
				}
				httpPost(`/api/sellerstoreotherapply/unbindAdditionalTerminal`, _this.terminalInfo).then((res) => {
					console.log(88, res)
					_this.showFour = false;
					if (res.code == 0) {
						uni.$u.toast("解绑成功");
					}
				});
			}


		},
	};
</script>

<style lang="scss">
	.my-store-info {
		background-color: #f4f5f7;
		height: calc(100vh - 20rpx);
		padding-top: 20rpx;
	}

	.head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #fff;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: 700;
		}
	}

	.store-form {
		background-color: #fff;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.show-box {
		width: 540rpx;
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			text-align: center;
			font-weight: 600;
		}

		.tip {
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
		}

		.input-box {
			margin-top: 20rpx;
		}

		.sure {
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 70rpx;
			background: linear-gradient(to right, #37AFFA, #74D6FF);
			color: #fff;
			margin-left: 170rpx;
			margin-top: 40rpx;
		}
	}

	.show-box-two {
		width: 570rpx;
		padding: 40rpx;
		border-radius: 10rpx;

		.code-box {
			width: 400rpx;
			height: 400rpx;
			border: 2rpx solid #f4f5f7;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			margin-left: 85rpx;
		}

		.tip {
			font-size: 24rpx;
			color: #AAAAAA;
		}

		.title {
			text-align: center;
		}
	}

	.addset {
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #37AFFA;
		color: #fff;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
	}

	.btn {
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 10rpx;
		width: 690rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: #ff3d55;
		color: #fff;
	}

	.cash-code {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 40rpx;

		.number {
			text-align: center;
		}
	}

	.containerImg {
		width: 280px;
		height: 280px;
		margin: 40rpx auto;
	}

	.code-mb {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-top: 60rpx;
		margin-bottom: 60rpx;

		.code-btn {
			// width: 200rpx !important;
			// background-color: #f2b626 !important;
			// color: #fff !important;
			// font-size: 24rpx !important;
			// padding: 0 !important;
		}

	}

	.sure-btn {
		height: 70rpx;
		line-height: 70rpx;
		background-color: #ff3d55;
		text-align: center;
		color: #fff;
		margin-top: 40rpx;
		border-radius: 10rpx;
	}

	.show-box-two {
		.title {
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.mb {
			font-size: 24rpx;
			color: #AAAAAA;
			text-align: center;
		}
	}
	.u-button{
		width: 180rpx !important;
		height: 70rpx !important;
	}
</style>